<template>
  <div class="app-container">
    <!-- 把所有字段都生成了，先删除不要的字段，再做定制化 -->
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="数据源名称" prop="datasourceNameLike">
            <el-input
              v-model="queryParams.datasourceNameLike" placeholder="请输入数据源名称" clearable size="default" style="width: 160px"
              @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数据源类型" prop="datasourceType">
            <dict-selector v-model="queryParams.datasourceType" :dictData="datasourceTypeOptions" placeholder="数据源类型" size="default" style="width: 160px;" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数据源分组" prop="datasourceGroup">
            <dict-selector v-model="queryParams.datasourceGroup" :dictData="datasourceGroupOptions" placeholder="数据源分组" size="default" style="width: 160px;" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地址" prop="dbHostLike" label-width="80px">
            <el-input v-model="queryParams.dbHostLike" placeholder="请输入数据源地址" clearable size="default" style="width: 160px" @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="数据库名称" prop="dbNameLike">
            <el-input v-model="queryParams.dbNameLike" placeholder="请输入数据库名称" clearable size="default" style="width: 160px" @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否启用" prop="isEnable">
            <el-radio-group v-model="queryParams.isEnable">
              <el-radio key="" label="">全部</el-radio>
              <el-radio v-for="dict in isEnableOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <search-button @click="handleQuery" :perm="['data:datasource:search']" />
            <reset-button @click="resetQuery" :perm="['data:datasource:search']" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <add-button @click="handleAdd" :perm="['data:datasource:insert']" :roleType="['app']" />
      <delete-button @click="handleDelete" :disabled="multiple" :perm="['data:datasource:delete']" :roleType="['app']" />
      <add-button @click="handleAddDataSource" text="新增数据源" :perm="['data:datasource:insert']" :roleType="['app']" />
      <right-toolbar v-model:showSearch="showSearch" @query-table="getList" :perm="['data:datasource:search']" />
    </el-row>

    <!-- 把所有字段都生成了，先删除不要的字段，再做定制化 -->
    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="数据源名称" prop="datasourceName" :show-overflow-tooltip="true" min-width="100" />
      <el-table-column label="数据源编号" prop="datasourceCode" :show-overflow-tooltip="true" min-width="100" />
      <el-table-column label="数据源类型" prop="datasourceType" align="center" width="100">
        <template #default="scope">
          {{ selectDictLabel(datasourceTypeOptions,scope.row.datasourceType) }}
          <el-popover placement="top-start" title="连接信息" width="400" trigger="hover" :content="scope.row.jdbcUrl">
            <template #reference>
              <i class="el-icon-info" style="color:#67C23A"></i>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="数据源分组" prop="datasourceGroup" align="center" width="100">
        <template #default="scope">{{ selectDictLabel(datasourceGroupOptions,scope.row.datasourceGroup) }}</template>
      </el-table-column>
      <el-table-column label="地址" prop="dbHost" align="center" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="端口号" prop="dbPort" align="center" :show-overflow-tooltip="true" width="80" />
      <el-table-column label="数据库名称" prop="dbName" align="center" :show-overflow-tooltip="true" min-width="120" />
      <el-table-column label="操作权限" prop="dbPrivileges" align="center" min-width="200">
        <template #default="scope">
          <three-choices-tag :value="scope.row.dbPrivileges || ''" c1Text="只读" c1Value="RO" c2Text="只写" c2Value="WO" c3Text="读写" c3Value="RW" />
        </template>
      </el-table-column>
      <el-table-column label="JDBC连接参数" prop="jdbcArguments" :show-overflow-tooltip="true" min-width="200" />
      <el-table-column label="是否启用" prop="isEnable" align="center" width="100">
        <template #default="scope">
          <yes-no-tag yesText="启用" noText="禁用" :value="scope.row.isEnable" />
        </template>
      </el-table-column>
      <el-table-column label="更新人" prop="updateBy" align="center" width="120" />
      <el-table-column label="更新时间" prop="updateTime" align="center" width="160" />
      <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width" v-if="hasRoleType(['app'])">
        <template #default="scope">
          <el-button type="text" icon="el-icon-connection" @click="testConnection(scope.row)" :perm="['data:datasource:search']" :roleType="['app']">测试连接
          </el-button>
          <text-edit-button @click="handleUpdate(scope.row)" :perm="['data:datasource:update']" :roleType="['app']" />
          <text-delete-button
            @click="handleDelete(scope.row)" :perm="['data:datasource:delete']" :roleType="['app']"
            :title="'是否确认删除记录'+scope.row.datasourceId+'?'" />
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog v-el-drag-dialog :title="title" :close-on-click-modal="false" v-model="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="数据源类型" prop="datasourceType">
              <dict-selector
                  v-model="form.datasourceType" :dictData="datasourceTypeOptions"
                  :defaultSelectIndex="datasourceTypeSelectIndex" placeholder="数据源类型" :clearable="false" size="default"
                  style="width: 100%;" @change="datasourceTypeChange" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据源分组" prop="datasourceGroup">
              <dict-selector
                  v-model="form.datasourceGroup" :dictData="datasourceGroupOptions" placeholder="数据源分组" :clearable="false" size="default"
                  style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="数据源编号" prop="datasourceCode">
              <el-input v-model="form.datasourceCode" placeholder="请输入数据源编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="数据源名称" prop="datasourceName">
              <el-input v-model="form.datasourceName" placeholder="请输入数据源名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="数据库地址" prop="dbHost" v-if="!isChangeFormItem">
              <el-input v-model="form.dbHost" placeholder="请输入数据库地址" @change="concatJdbcUrl" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据库端口号" prop="dbPort" v-if="!isChangeFormItem">
              <el-input-number
                controls-position="right" :min="1" :max="65535" v-model="form.dbPort" placeholder="请输入数据库端口号" style="width: 100%;"
                @change="concatJdbcUrl" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="!isChangeFormItem">
          <el-col :span="12">
            <el-form-item label="数据库名称" prop="dbName">
              <el-input v-model="form.dbName" placeholder="请输入数据库名称" clearable @change="concatJdbcUrl" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据库操作权限" prop="dbPrivileges">
              <el-radio-group v-model="form.dbPrivileges">
                <el-radio v-for="dict in dbPrivilegesOptions" :key="dict.dictValue" :label="dict.dictLabel">{{ dict.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="!isChangeFormItem">
          <el-col :span="24">
            <el-form-item label="JDBC连接参数" prop="jdbcArguments">
              <el-input
                v-model="form.jdbcArguments" placeholder="请输入JDBC连接参数" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" clearable
                @change="concatJdbcUrl" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="isChangeFormItem">
          <el-col :span="!isShow?12:24">
            <el-form-item label="服务器地址" prop="dbHost">
              <el-input v-model="form.dbHost" placeholder="请输入服务器地址" clearable :type="isShow?'textarea':''" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!isShow">
            <el-form-item label="服务器端口" prop="dbPort">
              <el-input v-model="form.dbPort" placeholder="请输入服务器端口" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="安全认证" prop="enableAuth" v-if="isShow">
          <el-radio-group v-model="form.enableAuth" active-label="Y" inactive-label="N">
            <el-radio label="Y">是</el-radio>
            <el-radio label="N">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="20" v-if="form.enableAuth === 'Y' || !isShow">
          <el-col :span="12">
            <el-form-item label="用户名" prop="jdbcUsername">
              <el-input v-model="form.jdbcUsername" placeholder="请输入用户名"  clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="jdbcPassword">
              <el-input v-model="form.jdbcPassword" placeholder="请输入密码" type="password" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.enableAuth === 'Y'">
          <el-col :span="12">
            <el-form-item label="安全协议" prop="securityProtocol" v-if="form.enableAuth === 'Y'">
              <el-select v-model="form.securityProtocol">
                <el-option v-for="dict in securityTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue">{{ dict.dictLabel }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认证机制" prop="authentication" v-if="form.enableAuth === 'Y'">
              <el-select v-model="form.authentication">
                <el-option v-for="dict in authenticationOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue">{{ dict.dictLabel }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="20" v-if="!isChangeFormItem">
          <el-col :span="24">
            <el-form-item label="JDBC连接URL" prop="jdbcUrl">
              <el-input placeholder="请输入数据库地址、端口号和连接参数" type="textarea" v-model="form.jdbcUrl" :autosize="{ minRows: 2, maxRows: 4}" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="!isChangeFormItem">
          <el-col :span="24">
            <el-form-item label="JDBC驱动类" prop="jdbcDriverClass">
              <el-input placeholder="请选择数据库类型" v-model:="form.jdbcDriverClass" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="是否启用" prop="isEnable">
              <el-radio-group v-model="form.isEnable">
                <el-radio v-for="dict in isEnableOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <dialog-footer @ok="submitForm" @cancel="cancel">
          <template #start>
            <el-button @click="testConnection(form)">测试连接</el-button>
          </template>
        </dialog-footer>
      </template>
    </el-dialog>

    <el-dialog v-model="showAddDataSource" title="新增数据源" :close-on-click-modal="false" append-to-body width="800px">
      <el-form>
        <el-form-item label="选择数据源">
          <el-select v-model="curDataSourceList" multiple>
            <el-option v-for="opt in innerDataSourceList" :key="opt" :value="opt" :label="opt" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <dialog-footer @ok="handleSaveInnerDataSource" @cancel="dataSourceCancel">
        </dialog-footer>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { search, insert, deleteByIds, updateById, selectById, testConnection, checkDatasourceCodeUnique, searchInnerDataSource, saveInnerDataSource } from "@data/api/data/datasource";
import { debounceWrapper } from "@/utils/zmids";

export default {
  name: 'DataDataSource',
  data() {
    const checkDatasourceCodeUniqueRule = (rule, value, callback) => {
      checkDatasourceCodeUnique(this.form.datasourceCode).then(response => {
        if (response.data.length  && response.data[0].datasourceId != this.form.datasourceId) {
          callback("数据源编码已存在");
        } else {
          callback();
        }
      })
    };

    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      dataList: [],
      // 数据源类型的数据字典选项列表：data_datasource_type
      datasourceTypeOptions: [],
      // 数据源分组的数据字典选项列表：data_datasource_group
      datasourceGroupOptions: [],
      // 安全认证类型的数据字典选项列表：security_protocol_type
      securityTypeOptions: [],
      // 安全协议类型的数据字典选项列表：authentication_type
      authenticationOptions: [],
      // 数据库操作权限的固定字典选项列表
      dbPrivilegesOptions: [{ "dictValue": "RO", "dictLabel": "只读" }, { "dictValue": "WO", "dictLabel": "只写" }, { "dictValue": "RW", "dictLabel": "读写" }],
      // 是否启用的固定字典选项列表
      isEnableOptions: [{ "dictValue": "Y", "dictLabel": "启用" }, { "dictValue": "N", "dictLabel": "禁用" }],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 数据源名称
        datasourceNameLike: undefined,
        // 数据源类型
        datasourceType: undefined,
        // 数据源分组
        datasourceGroup: undefined,
        // 数据库地址
        dbHostLike: undefined,
        // 数据库名称
        dbNameLike: undefined,
        // 是否启用
        isEnable: '',
      },
      // 控制 dialog
      open: false,
      // 弹出层标题
      title: '',
      // 表单参数
      form: {},
      // 新增页面选择的数据源类型选项
      datasourceTypeOption: undefined,
      datasourceTypeSelectIndex: null,
      // 规则
      rules: {
        // 数据源编码
        datasourceCode: [
          { required: true, message: '数据源编码不可以为空', trigger: 'blur' }
          , { min: 1, max: 128, message: "数据源编码的长度最多 128 个字符", trigger: "blur" },
          { required: true, validator: checkDatasourceCodeUniqueRule, trigger: "blur" }
        ],
        // 数据源名称
        datasourceName: [
          { required: true, message: '数据源名称不可以为空', trigger: 'blur' }
          , { min: 1, max: 128, message: "数据源名称的长度最多 128 个字符", trigger: "blur" }
        ],
        // 数据源类型
        datasourceType: [
          { required: true, message: '数据源类型不可以为空', trigger: 'blur' }
          , { min: 1, max: 32, message: "数据源类型的长度最多 32 个字符", trigger: "blur" }
        ],
        // 数据源分组
        datasourceGroup: [
          { required: true, message: '数据源分组不可以为空', trigger: 'blur' }
          , { min: 1, max: 32, message: "数据源分组的长度最多 32 个字符", trigger: "blur" }
        ],
        // 数据库地址
        dbHost: [
          { required: true, message: '数据库地址不可以为空', trigger: 'blur' }
          , { min: 1, max: 64, message: "数据库地址的长度最多 64 个字符", trigger: "blur" }
        ],
        // 数据库端口号
        dbPort: [
          { required: true, message: '数据库端口号不可以为空', trigger: 'blur' }
        ],
        // 数据库名称
        dbName: [
          { required: true, message: '数据库名称不可以为空', trigger: 'blur' }
          , { min: 1, max: 128, message: "数据库名称的长度最多 128 个字符", trigger: "blur" }
        ],
        // 数据库操作权限
        dbPrivileges: [
          { required: true, message: '数据库操作权限不可以为空', trigger: 'blur' }
          , { min: 1, max: 2, message: "数据库操作权限的长度最多 2 个字符", trigger: "blur" }
        ],
        // JDBC连接参数
        jdbcArguments: [
          { min: 1, max: 256, message: "JDBC连接参数的长度最多 256 个字符", trigger: "blur" }
        ],
        // 用户名
        jdbcUsername: [
          { required: true, message: '用户名不可以为空', trigger: 'blur' }
          , { min: 1, max: 128, message: "用户名的长度最多 128 个字符", trigger: "blur" }
        ],
        // 密码
        jdbcPassword: [
          { required: true, message: '密码不可以为空', trigger: 'blur' }
          , { min: 1, max: 256, message: "密码的长度最多 256 个字符", trigger: "blur" }
        ],
        // 是否启用
        isEnable: [
          { required: true, message: '是否启用不可以为空', trigger: 'blur' }
          , { min: 1, max: 1, message: "是否启用的长度最多 1 个字符", trigger: "blur" }
        ],
        enableAuth: [
          { required: true, message: '安全认证不可以为空', trigger: 'blur' }
          , { min: 1, max: 1, message: "安全认证的长度最多 1 个字符", trigger: "blur" }
        ],
        securityProtocol: [
          { required: true, message: '安全协议不可以为空', trigger: 'blur' }
          , { min: 1, max: 32, message: "安全协议的长度最多 32 个字符", trigger: "blur" }
        ],
        authentication: [
          { required: true, message: '认证机制不可以为空', trigger: 'blur' }
          , { min: 1, max: 32, message: "认证机制的长度最多 32 个字符", trigger: "blur" }
        ],
      },
      showAddDataSource: false,
      innerDataSourceList: [],
      curDataSourceList: []
    };
  },
  computed: {
    // 数据源类型改变，form按需显示item
    isChangeFormItem() {
      return ["ftp", "sftp", "es", "kafka"].includes(this.form.datasourceType);
    },
    isShow() {
      return ["kafka"].includes(this.form.datasourceType);
    }
  },
  watch: {
    datasourceTypeOption:{
      handler(){
        if (this.datasourceTypeOption) {
          // this.form.dbPort = this.datasourceTypeOption.dbPort;
          this.form.jdbcDriverClass = this.datasourceTypeOption.jdbcDriverClass;
        }
        this.concatJdbcUrl();
      },
      deep:true,
      immediate:true
    }
  },
  created() {
    // 初始化字段
    this.reset();
    // 查询列表
    this.getList();

    // 获取数据字典：data_datasource_type
    this.getDicts("data_datasource_type").then(response => {
      this.datasourceTypeOptions = response.data;
    });
    // 获取数据字典：data_datasource_group
    this.getDicts("data_datasource_group").then(response => {
      this.datasourceGroupOptions = response.data;
    });
    this.getDicts("security_protocol_type").then(response => {
      this.securityTypeOptions = response.data;
    });
    this.getDicts("authentication_type").then(response => {
      this.authenticationOptions = response.data;
    });
  },
  methods: {
    // 查询列表
    getList: debounceWrapper(function () {
      this.loading = true;
      search(this.queryParams).then(
        response => {
          this.dataList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    }),
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 表单重置
    reset() {
      this.datasourceTypeSelectIndex = null
      this.form = {
        datasourceName: '',
        datasourceType: '',
        datasourceGroup: '',
        dbHost: '',
        dbPort: '',
        dbName: '',
        dbPrivileges: 'RO',
        jdbcArguments: '',
        jdbcUsername: '',
        jdbcPassword: '',
        isEnable: 'Y',
        enableAuth: 'N',
      };
      if (this.datasourceTypeOptions && this.datasourceTypeOptions.length > 0) {
        this.datasourceTypeOptions.forEach((option, index, arr) => {
          if ('Y' === option.isDefault) {
            this.form.datasourceType = option.dictValue;
            this.form.dbPort = option.dbPort;
          }
        });
      }
      if (this.datasourceGroupOptions && this.datasourceGroupOptions.length > 0) {
        this.datasourceGroupOptions.forEach((option, index, arr) => {
          if ('Y' === option.isDefault) {
            this.form.datasourceGroup = option.dictValue;
          }
        });
      }
      // 重置字段校验
      this.$refs.form && this.$refs.form.clearValidate();
      this.resetForm("form");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // 所有选中的ID
      this.ids = selection.map(item => item.datasourceId)
      // 激活多选删除
      this.multiple = !selection.length
    },
    // 新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增数据源信息";
    },
    // 删除按钮操作
    handleDelete: debounceWrapper(function (row) {
      const deleteIds = row ? row.datasourceId : this.ids.join(",");
      deleteByIds(deleteIds)
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () { });
    }),
    // 修改按钮操作
    handleUpdate: debounceWrapper(function (row) {
      this.reset();
      selectById(row.datasourceId).then(response => {
        this.form = response.data;
        this.open = true;
        this.datasourceTypeSelectIndex = this.datasourceTypeOptions.findIndex(n => n.dictValue === this.form.datasourceType)
        this.title = "修改数据源信息";
        this.datasourceTypeOptions.forEach((option, index, arr) => {
          if (this.form.datasourceType === option.dictValue) {
            this.datasourceTypeOption = option;
          }
        });
      });
    }),
    // 提交按钮
    submitForm: debounceWrapper(function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.datasourceId != undefined) {
            updateById(this.form).then(response => {
              if (response.data === 1) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            insert(this.form).then(response => {
              if (response.data === 1) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    }),
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 切换数据源类型
    datasourceTypeChange(value, option) {
      this.datasourceTypeOption = option;
    },
    // 组装JdbcUrl
    concatJdbcUrl: debounceWrapper(function () {
      if (this.datasourceTypeOption) {
        this.form.jdbcUrl = "jdbc:" + this.datasourceTypeOption.dictValue + "://" + this.form.dbHost + ":" + this.form.dbPort + "/" + this.form.dbName + (this.form.jdbcArguments ? "?" + this.form.jdbcArguments : "");
      }
    }),
    // 数据库连通性测试
    testConnection: debounceWrapper(function (data) {
      var formValid = true;
      if (this.open == true) {
        this.$refs["form"].validate(valid => {
          formValid = valid;
        });
      }
      if (formValid) {
        testConnection(data).then(response => {
          if (response.data === true) {
            this.msgSuccess("连接成功");
          } else {
            this.msgError("连接失败");
          }
        });
      }
    }),
    getInnerDataSource(){
      return searchInnerDataSource().then((res)=>{
        this.innerDataSourceList = res.data
      })
    },
    handleSaveInnerDataSource(){
      const curDataSourceStr = this.curDataSourceList.join(',')
      return saveInnerDataSource(curDataSourceStr).then(()=>{
        this.msgSuccess('新增成功！')
        this.dataSourceCancel()
        this.getList()
      })
    },
    handleAddDataSource(){
      this.getInnerDataSource()
      this.curDataSourceList = []
      this.showAddDataSource = true
    },
    dataSourceCancel(){
      this.showAddDataSource = false
    }
  },
}
</script>

<style lang="scss" scoped>
</style>